<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .my-btn {
        width: 150px;
        height: 50px;
        background-color: rgb(8, 120, 248);
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" name="" v-model="name" />

      <my-button :name="name"></my-button>

      <my-button name="1"></my-button>

      <my-div></my-div>
    </div>
    <script src="../vue3.2.45.js"></script>
    <script>
      const btn = {
        // 需要一个 name 属性
        props: {
          name: String,
        },
        data() {
          return {
            count: 0,
          };
        },
        template:
          "<button class='my-btn' @click='count++'>{{ name }}, 你已经点击了 {{ count }} 次</button>",
      };

      const myDiv = {
        components: {
          btn, // 'btn': btn
        },
        template: "<div class='my-div'><btn name='张三'></btn></div>",
      };

      const app = Vue.createApp({
        // 局部注册
        components: {
          "my-button": btn,
          "my-div": myDiv,
        },
        data() {
          return { name: "abc" };
        },
      });

      // 自定义组件, 全局注册
      //   app.component("MyButton", {
      //     data() {
      //       return {
      //         count: 0,
      //       };
      //     },
      //     template:
      //       "<button class='my-btn' @click='count++'>你已经点击了 {{ count }} 次</button>",
      //   });

      //   app.component("my-div", {
      //     template: "<div class='my-div'> <my-button></my-button></div>",
      //   });

      const vm = app.mount("#app");
    </script>
  </body>
</html>
